import {createRouter, createWebHashHistory} from 'vue-router';

export const routes = [
  {path: "/", title: '首页', component: () => import("../views/index.vue")},
  {
    path: "/cssBase",
    title: 'css-基础',
    children: [
      {path: '/cssBase/loading1', title: '加载动画1', component: () => import("../views/cssBase/loading1.vue")},
      {path: '/cssBase/loading2', title: '加载动画2', component: () => import("../views/cssBase/loading2.vue")},
      {path: '/cssBase/loading3', title: '加载动画3', component: () => import("../views/cssBase/loading3.vue")},
      {path: '/cssBase/loading4', title: '加载动画4', component: () => import("../views/cssBase/loading4.vue")},
      {path: '/cssBase/suspend1', title: '悬浮动画1', component: () => import("../views/cssBase/suspend1.vue")},
      {path: '/cssBase/suspend2', title: '悬浮动画2', component: () => import("../views/cssBase/suspend2.vue")},
      {path: '/cssBase/suspend3', title: '悬浮动画3', component: () => import("../views/cssBase/suspend3.vue")},
      {path: '/cssBase/menuThird', title: '三级菜单', component: () => import("../views/cssBase/menuThird.vue")},
      {path: '/cssBase/navSun', title: '太阳导航', component: () => import("../views/cssBase/navSun.vue")},
      {path: '/cssBase/jumpBack', title: '回弹弹跳框', component: () => import("../views/cssBase/jumpBack.vue")},
      {path: '/cssBase/swiper', title: '轮播图', component: () => import("../views/cssBase/swiper.vue")},
      {path: '/cssBase/gear', title: '转动的齿轮', component: () => import("../views/cssBase/gear.vue")},
      {path: '/cssBase/switch', title: 'input开关', component: () => import("../views/cssBase/switch.vue")},
      {
        path: '/cssBase/transformDemo',
        title: 'transform练习',
        component: () => import("../views/cssBase/transformDemo.vue")
      },
      {path: '/cssBase/blurSlur', title: '模糊滤镜', component: () => import("../views/cssBase/blurSlur.vue")},
    ]
  },
  {
    path: '/clipPath',
    title: 'clip-path',
    children: [
      {path: '/clipPath/clipPath1', title: '练习1', component: () => import("../views/clipPath/clipPath1.vue")},
      {path: '/clipPath/clipPath2', title: '练习2', component: () => import("../views/clipPath/clipPath2.vue")},
    ]
  },
  {
    path: '/textBg',
    title: '文字背景',
    children: [
      {path: '/textBg/textBg1', title: '练习1', component: () => import("../views/textBg/textBg1.vue")},
      {path: '/textBg/textBg2', title: '练习2', component: () => import("../views/textBg/textBg2.vue")},
      {path: '/textBg/textBg3', title: '练习3', component: () => import("../views/textBg/textBg3.vue")},
    ]
  },
  {
    path: '/cube',
    title: '旋转方块',
    children: [
      {path: '/cube/cube1', title: 'webpack模仿', component: () => import("../views/cube/cube1.vue")},
      {path: '/cube/cube2', title: '透明方块', component: () => import("../views/cube/cube2.vue")},
      {path: '/cube/cube3', title: '透视方块', component: () => import("../views/cube/cube3.vue")},
    ]
  },
  {
    path: '/chat', title: '聊天', children: [
      {path: '/chat/test', title: '测试', component: () => import("../views/chat/test")},
    ]
  }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

export default router;
